<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>科幻卡片悬停效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="box" style="--clr: #f00">
        <ion-icon name="brush-outline"></ion-icon>
        <h2>01<br /><small>Design</small></h2>
        <div class="clip">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="box" style="--clr: #0f0">
        <ion-icon name="code-slash-outline"></ion-icon>
        <h2>02<br /><small>Code</small></h2>
        <div class="clip">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="box" style="--clr: #f0f">
        <ion-icon name="rocket-outline"></ion-icon>
        <h2>03<br /><small>Launch</small></h2>
        <div class="clip">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>

    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
